<template>
  <div>
    <a v-for="(btnItem,index) in tableColumnBtn" v-if="btnItem.compTag === 'a'" :key="index" @[btnItem.eventName]="columnBtnOnClick(actionBtnItem)">{{ btnItem.name }}
      <a-divider :type="tableDividerType" />
    </a>
    <router-link v-for="(btnItem,index) in tableColumnBtn" v-if="btnItem.compTag === 'r'" :key="index" :to="{query:{id:1}}" target="_blank">
      {{ btnItem.name }}
      <a-divider :type="tableDividerType" />
    </router-link>
    <a-popconfirm v-for="(btnItem,index) in tableColumnBtn" v-if="btnItem.compTag === 'confirm'" :key="index" :title="btnItem.title" @[btnItem.eventName]="columnBtnOnClick(btnItem)">
      <a>{{ btnItem.name }}</a>
      <a-divider :type="tableDividerType" />
    </a-popconfirm>
    <a-dropdown v-if="tableColumnMenu.length > 0">
      <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
      <a-menu slot="overlay">
        <a-menu-item v-for="(menuItem,index) in tableColumnMenu" key="index">
          <a v-if="menuItem.compTag === 'a'" @[menuItem.eventName]="columnBtnOnClick(menuItem)">{{ menuItem.name }}</a>
          <a-popconfirm v-else-if="menuItem.compTag === 'confirm'" :title="menuItem.title" @[menuItem.eventName]="columnBtnOnClick(menuItem)"><a>{{ menuItem.name }}</a></a-popconfirm>
          <a v-else="menuItem.compTag === 'button'" @[menuItem.eventName]="columnBtnOnClick(menuItem)">{{ menuItem.name }}</a>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
  </div>
</template>
<script>
export default {
  name: 'ColumnBtnTplList',
  components: {
  },
  props: ['tableColumnMenuData', 'tableColumnBtnData'],
  data() {
    return {
      accept: 'image/png,image/jpg,video/mp4,txt,doc,docx,ppt,pptx',
      dividerType: 'vertical',
      actionMenuShow: true,
      tableColumnBtn: [],
      tableColumnMenu: []
    }
  },
  computed: {

  },
  watch: {
    tableColumnMenuData(val) {
      this.tableColumnMenu = val
      if (this.tableColumnMenu.length > 0) {
        this.actionMenuShow = true
      } else {
        // this.actionMenuShow = false;
      }
    },
    tableColumnBtnData(val) {
      console.log('#watch @@@@@@@@@@@@@@@@@2222  this.tableColumnBtnData', this.tableColumnBtnData)
      this.tableColumnBtn = val
    }
  },
  created() {
    console.log('@@@@@@@@@@@@@@@@@@@@@@@@@')
  },
  methods: {
    test() {
    },
    initTableColumnMenuData(val) {
      this.actionMenu = val
    },
    initTableColumnBtnData(val) {
      console.log('#winitTableColumnBtnData', val)
      this.actionBtn = val
    },
    columnBtnOnClick(menuFn) {
      console.log('menuFn', menuFn)
      this.$emit('tableColumnBtnOnClick', menuFn)
    }
  }
}
</script>
